import { useEffect, useRef, useState } from 'react';
import hljs from 'highlight.js';
import rawCode from './test.tsx?raw';
import './index.scss'
import 'highlight.js/styles/atom-one-dark.css';
// import 'highlight.js/styles/atom-one-light.css';


const CodeBlock: React.FC = () => {
  const themes = ['vs2015.min.css','brown-paper.min.css'] as const
  const [theme, setTheme] = useState<string>('vs2015.min.css')
  const codeRef = useRef<HTMLElement>(null);
  useEffect(() => {
    hljs.highlightAll();
  }, []);
  useEffect(() => {
    // import(`highlight.js/styles/${theme}`);
  }, [theme]);
  const myTestCode = rawCode
  const abc = (((((((((((((((1)))))))))))))))
  return (<>
    <div>我是代码块</div>
    <select
      value={theme}
      onChange={e => setTheme(e.target.value as any)}>
      {themes.map(t => (
        <option key={t} value={t}>{t}</option>
      ))}
    </select>
    <pre>                  {/* 保形 */}
      <code ref={codeRef} className="language-tsx">  {/* hljs 认的钩子 */}
        { myTestCode }
      </code>
    </pre>
  </>)
}
export default CodeBlock